<html>
  <head>
    <title>Publisher Response</title>
    <style>
      h2 {
      margin: 3ex 0 1ex;
      }
      th {
      background-color: grey;
      }
      td {
      vertical-align: top;
      overflow: auto;
      }
      tr.details td {
      padding: 0 3ex;
      }
      td pre {
      margin: 3ex 3em;
      width: 500px;
      }
    </style>
    <script>
      function toggleDisplay(id) {
      el = document.getElementById(id);
      if (el.style.display == "none") {
      el.style.display = "block"
      } else {
      el.style.display = "none"
      }
      }
    </script>
  </head>
  <body>
    <h1>Publishers</h1>
    <table border="1" cellspacing="0">
    {% for item in items %}
      <tr>
        <th>Publisher ID</th>
        {% if item.status %}<th>Relationship Status</th>{% endif %}
        <th>Publisher Name</th>
        <th>Publisher Category</th>
        {% if item.joinDate %}<th>Join Date</th>{% endif %}
        {% if item.epcSevenDayAverage %}<th>EPC Seven Day Average</th>{% endif %}
        {% if item.epcNinetyDayAverage %}<th>EPC Ninety Day Average</th>{% endif %}
        {% if item.payoutRank %}<th>Payout Rank</th>{% endif %}
      </tr>
      <tr class="publisherInfo">
        <td>{{ item.id }}</td>
        {% if item.status %}<td>{{ item.status }}</td>{% endif %}
        <td>{{ item.name }}</td>
        <td>{{ item.classification }}</td>
        {% if item.joinDate %}<td>{{ item.joinDate }}</td>{% endif %}
        {% if item.epcSevenDayAverage %}<td>{{ item.epcSevenDayAverage }}</td>{% endif %}
        {% if item.epcNinetyDayAverage %}<td>{{ item.epcNinetyDayAverage }}</td>{% endif %}
        {% if item.payoutRank %}<td>{{ item.payoutRank }}</td>{% endif %}
      </tr>
      {% if item.sites %}
      <tr style="border:1px solid #444">
        <th class="sites">Sites:</th>
        <td colspan="11">{{ item.sites }}</td>
      </tr>
      {% endif %}
      {% empty %}
      <tr>
        <td>
          <p style="padding:10px">No publishers fit that criteria. Try searching for modifying your search.</p>
        </td>
      </tr>
      {% endfor %}
    </table>
  </body>
</html>
